<template>
	<view class="pages-box rel">
		<block v-if="isLoad">
			<view @tap.stop="$util.goUrl({url:`/user/pages/stored/cash-out?type=${options.type == 1 ? 'coach' : 'company'}`})" class="mine-menu-list c-base"
				:style="{background:primaryColor}">
				<view class="space-lg"></view>
				<view class="space-lg"></view>
				<view class="flex-center f-caption mt-sm">可提现金额(元)</view>
				<view class="money-info flex-center flex-y-baseline mt-sm mb-sm">¥<view class="money">
						{{detail.cap_cash}}
					</view>
				</view>
				<view class="flex-center pt-md pb-md f-caption c-base-rgba">每月提现不限次数</view>
				<view class="cash-out-btn flex-center fill-base f-paragraph radius" :style="{color: primaryColor}">提现
				</view>
				<view class="space-lg"></view>
				<view class="space-lg"></view>
			</view>
			<view class="money-count fill-base flex-center pt-md pb-md">
				<view class="item-child flex-center flex-column">
					<view class="flex-y-baseline f-md-title mb-sm">{{detail.extract_total_price || 0}}</view>
					<view class="f-caption c-caption flex-center">累计提现(元)</view>
				</view>
				<view class="item-child flex-center flex-column b-1px-l">
					<view class="flex-y-baseline f-md-title mb-sm">{{detail.no_received || 0}}</view>
					<view class="f-caption c-caption">未入账(元)</view>
				</view>
			</view>
			<view @tap.stop="$util.goUrl({url:`/user/pages/stored/record?type=${options.type}`})"
				class="flex-between pt-lg pb-lg pl-lg pr-md fill-base b-1px-t mt-md">
				<view class="f-title c-title">提现记录</view>
				<view class="flex-y-center f-paragraph c-title">
					<i class="iconfont icon-right ml-sm"></i>
				</view>
			</view>
			<view @tap.stop="$util.goUrl({url:`/user/pages/stored/commission?type=${options.type == 1 ? 4 : 3}`})"
				class="flex-between pt-lg pb-lg pl-lg pr-md fill-base b-1px-t">
				<view class="f-title c-title">佣金明细</view>
				<view class="flex-y-center f-paragraph c-title">
					<i class="iconfont icon-right ml-sm"></i>
				</view>
			</view>
		</block>
		
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	let timer = null
	export default {
		data() {
			return {
				isLoad: false,
				detail: {},
				options: {},
				tabList: [
					{name: '总资产（元）',number: 0 , type: 'balance'},
					{name: '累计充值（元）',number: 0, type: 'recharge_balance'},
					{name: '累计消费（元）',number: 0, type: 'consume_money'}
				]
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.options = options || {type: 1}
			uni.setNavigationBarTitle({
				title: this.options.type == 1 ? '我的钱包' : '钱包'
			})
			this.$util.showLoading()
			this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updatePoolItem', 'updateHomeItem']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.getDetail()
			},
			async initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getDetail(){
				let {
					type = 1
				} = this.options
				let methodModel = type == 1 ? 'coachCashInfo' : 'companyCashInfo'
				let data = await this.$api.user[methodModel]()
				this.detail = data
				this.isLoad = true
				this.$util.hideAll()
			},
			async submit(id){}
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.mine-menu-list {
			.money-info {
				font-size: 50rpx;
				
				.money {
					font-size: 70rpx;
				}
			}
				
			.cash-out-btn {
				width: 169rpx;
				height: 56rpx;
				margin: 0 auto;
			}
				
			.menu-title {
				height: 90rpx;
				
				.iconfont {
					font-size: 24rpx;
				}
			}
				
			.item-child {
				width: 25%;
				margin: 10rpx 0;
				
				.iconfont {
					font-size: 46rpx;
				}
			}
				
				
		}
				
				
		.money-count {
			.item-child {
				width: 50%;
			}
		}
	}
</style>
